﻿<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Wishing</title>

  <style>
    body {
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
      background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background-attachment: fixed;
      overflow: hidden;
    }

    @keyframes rotate {
      0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
      }

      100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
      }
    }

    @keyframes move1 {

      100% {
        left: 0%;
        bottom: 20%;
        opacity: 0;
      }
    }

    @keyframes move2 {

      100% {
        left: 15%;
        bottom: 20%;
        opacity: 0;
      }
    }

    @keyframes move3 {

      100% {
        left: 30%;
        bottom: 20%;
        opacity: 0;
      }
    }

    @keyframes move4 {

      100% {
        left: 45%;
        bottom: 20%;
        opacity: 0;
      }
    }

    @keyframes move5 {

      100% {
        left: 60%;
        bottom: 20%;
        opacity: 0;
      }
    }

    .stars {
      transform: perspective(500px);
      transform-style: preserve-3d;
      position: absolute;
      bottom: 0;
      perspective-origin: 50% 100%;
      left: 50%;
      animation: rotate 300s infinite linear;
    }

    .star {
      width: 2px;
      height: 2px;
      background: #F7F7B6;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 0 0 -300px;
      transform: translate3d(0, 0, -300px);
      backface-visibility: hidden;
    }

    .table {
      width: 400px;
      height: 350px;
      margin: 80px auto;
    }

    .table form {
      width: 100%;
    }

    .table .name {
      width: 280px;
      margin: 20px auto 30px auto;
      display: block;
      height: 30px;
      border-radius: 20px;
      border: none;
      background: rgba(0, 0, 0, 0.2);
      text-indent: 0.5em;
    }

    .table .btn {
      width: 100px;
      height: 30px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      border: none;
      color: white;
      margin: 0 auto;
      display: block;
    }

    /* .meteor {
      position: fixed;
      left: 100%;
      bottom: 100%;
      width: 100px;
      height: 2px;
      border-radius: 50%;
      background-color: #fff;
      background: linear-gradient(45deg, #fff, transparent);
      filter: drop-shadow(0 0 20px #fff);
      transform: translate(0, -100%) rotate(-45deg);
      animation: move 10s infinite linear;
      opacity: 1;
    } */
  </style>

</head>

<body>

  <div class="stars"></div>
  <!--背景层，不要删除，不然没有作用-->

  <div class="meteor"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


  <script>
    $(document).ready(function () {
      var stars = 800;  /*星星的密集程度，数字越大越多*/
      var $stars = $(".stars");
      var r = 1000;   /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/
      for (var i = 0; i < stars; i++) {
        var $star = $("<div/>").addClass("star");
        $stars.append($star);
      }
      $(".star").each(function () {
        var cur = $(this);
        var s = 0.2 + (Math.random() * 1);
        var curR = r + (Math.random() * 300);
        cur.css({
          transformOrigin: "0 0 " + curR + "px",
          transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")"
        })
      })

      var meteors = 50
      var $body = $('body')
      var $meteor
      var left
      var n
      var timer
      var w = document.documentElement.clientWidth
      var h = document.documentElement.clientHeight

      for (var i = 0; i < meteors; i++) {
        $meteor = $("<div/>");
        left = random(30, 150)
        n = Math.ceil((left - 50) / 20)
        $meteor.css({
          position: 'fixed',
          left: left + '%',
          bottom: '120%',
          width: random(30, 150) + 'px',
          height: '3px',
          'border-radius': '50%',
          'background-color': '#fff',
          background: 'linear-gradient(45deg, #fff, transparent)',
          filter: 'drop-shadow(0 0 20px #fff)',
          transform: ['translate(0, -100%) rotate(-', Math.atan(h * 0.8 / (w * (left - n * 10) / 100)) * (180 / Math.PI), 'deg)'].join(''),
          animation: ['move' + n, random(2, 10) + 's', 'infinite ease-in', random(0, 5) + 's'].join(' '),
          opacity: '1',
        })
        $body.append($meteor);
      }
    })

    function random(s, e) {
      return (Math.random() * (e - s)) + s
    }
  </script>


</body>

</html>